<template>
  <!-- 动土作业票申请 -->
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="ticketForm" :rules="rules" labelPosition="top" label-width="70vw">
        <view class="hidden-title">信息填写</view>
        <cu-cell-group>
          <uni-forms-item name="workArea">
            <cu-cell title="作业范围" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.workArea"
                placeholder="请输入作业范围(限20字)"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>

          <uni-forms-item name="workPattern">
            <cu-cell title="作业方式" column required>
              <uni-easyinput
                type="textarea"
                v-model="ticketForm.workPattern"
                placeholder="请输入作业方式(限20字)"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="image">
            <cu-cell title="作业简图" column required>
              <image-upload :imageUrl="ticketForm.image" state="edit" :limit="1" @change="imageOnChange"></image-upload>
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <cu-cell-group class="bor-top">
          <uni-forms-item name="workDepth">
            <cu-cell title="作业深度(m)" required>
              <input
                type="number"
                v-model="ticketForm.workDepth"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="workAcreage">
            <cu-cell title="作业面积(㎡)" required>
              <input
                type="number"
                v-model="ticketForm.workAcreage"
                placeholder="请输入"
                class="input"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </cu-cell>
          </uni-forms-item>
        </cu-cell-group>

        <cu-cell-group class="bor-top">
          <uni-forms-item name="startTime">
            <uni-datetime-picker hide-second :end="endTime" type="datetime" @change="onTimeChange($event, 'startTime')">
              <cu-cell
                title="计划开始时间"
                required
                link
                placeholder="请选择"
                :description="ticketForm.startTime"
              ></cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="endTime">
            <uni-datetime-picker
              hide-second
              :start="startTime"
              type="datetime"
              @change="onTimeChange($event, 'endTime')"
            >
              <cu-cell
                title="计划结束时间"
                required
                link
                placeholder="请选择"
                :description="ticketForm.endTime"
              ></cu-cell>
            </uni-datetime-picker>
          </uni-forms-item>
        </cu-cell-group>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuCellMultiLine from '@/components/cu-cell/cu-cell-multi-line.vue'
import CuSelect from '@/components/cu-select/cu-select.vue'
import ImageUpload from '@/components/image-upload/index.vue'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'

export default {
  components: {
    CuCellGroup,
    CuCell,
    CuCellMultiLine,
    CuSelect,
    ImageUpload
  },
  props: {
    ticketInfo: {
      type: Object,
      default: () => {}
    },
    templateId: {
      type: [String, Number],
      default: ''
    },
    unitType: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      ticketForm: {
        workArea: '', // 作业范围
        workPattern: '', // 作业方式
        workDepth: '', // 作业深度
        workAcreage: '', // 作业面积
        image: '', // 作业简图
        startTime: '',
        endTime: ''
      },
      selectUserType: 1,
      nodeIdx: '',
      result: {},
      staffs: [],
      rules: {
        workPattern: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        startTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        endTime: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        workArea: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        workDepth: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        workAcreage: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        image: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  computed: {
    endTime() {
      if (!this.ticketForm.endTime) {
        return ''
      }
      return dayjs(this.ticketForm.endTime).valueOf() - 60 * 60 * 1000
    },
    startTime() {
      if (!this.ticketForm.startTime) {
        return ''
      }
      return dayjs(this.ticketForm.startTime).valueOf() + 60 * 60 * 1000
    }
  },
  watch: {
    ticketInfo: {
      async handler(val) {
        if (val) {
          Object.keys(this.ticketInfo).map((k) => {
            this.ticketForm[k] = cloneDeep(this.ticketInfo[k])
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    onTimeChange(val, key) {
      if (val.trim().includes(' ')) {
        this.ticketForm[key] = val.trim()
      } else {
        this.$modal.showToast('请选择日期和时间')
      }
    },

    imageOnChange(urlList) {
      this.ticketForm.image = urlList.join(',')
    },
    async submit() {
      await this.$refs.form.validate()
      const start = dayjs(this.ticketForm.startTime).valueOf()
      const end = dayjs(this.ticketForm.endTime).valueOf()
      const oneHour = 60 * 60 * 1000
      if (end - start < oneHour) {
        this.$modal.showToast('开始时间与结束时间间隔必须大于60分钟')
        return
      }
      this.result = {
        ...this.ticketForm,
        procDefId: this.ticketForm.procDefId,
        workType: this.specialWorkType,
        workId: this.workId
      }
      console.log('this.result', this.result)
    }
  }
}
</script>

<style lang="scss" scoped>
.button-wrap {
  padding: 100rpx 75rpx 160rpx;
  display: flex;
  .space {
    width: 50rpx;
  }
  .submit-button,
  .draft-button {
    flex: 1;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    border-radius: 50rpx;
    font-size: 36rpx;
  }
  .submit-button {
    background: #454a5e;
  }

  .draft-button {
    background: #c4c088;
  }
}
</style>
